<template>
  <section class="xmv-card xmv-wrap">
    <h4>表单</h4>
    <section class="c-card carinfo-card">
      <section class="l-container c-card__item carinfo-card__item carinfo-card__item--width-94">
        <div class="o-grid carinfo-grid c-input-group">
          <div class="o-grid__cell carinfo-grid__cell carinfo-grid__cell--width-40">
            <label>VIN码</label>
          </div>
          <div class="o-field o-grid__cell carinfo-grid__cell">
            <input
              class="c-field"
              type="text"
              placeholder="请输入VIN码"
              maxlength="17"
              v-model="framNoModel">
          </div>
        </div>
      </section>
        <section class="l-container c-card__item carinfo-card__item carinfo-card__item--width-94">
          <div class="o-grid carinfo-grid c-input-group">
            <div class="o-grid__cell carinfo-grid__cell carinfo-grid__cell--width-40">
              <label>发动机号码</label>
            </div>
            <div class="o-field o-grid__cell carinfo-grid__cell">
              <input type="text"
                class="c-field"
                placeholder="请输入发动机号码"
                maxlength="30"
                v-model="engineNoModel">
            </div>
          </div>
        </section>
        <section class="l-container c-card__item carinfo-card__item carinfo-card__item--width-94">
          <div class="o-grid carinfo-grid c-input-group">
            <div class="o-grid__cell carinfo-grid__cell carinfo-grid__cell--width-40">
              <label>核定载客量</label>
            </div>
            <div class="o-field o-grid__cell carinfo-grid__cell">
              <input type="text"
                class="c-field"
                maxlength="2"
                placeholder="请输入核定载客量"
                v-model="seatCountModel"
              >
            </div>
          </div>
        </section>
    </section>
    <button type="button" class="c-button c-button--block u-medium c-button--error ">提交</button>

    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">

&ltsection class="c-card carinfo-card"&gt
  &ltsection class="l-container c-card__item carinfo-card__item carinfo-card__item--width-94"&gt
    &ltdiv class="o-grid carinfo-grid c-input-group"&gt
      &ltdiv class="o-grid__cell carinfo-grid__cell carinfo-grid__cell--width-40"&gt
        &ltlabel&gtVIN码&lt/label&gt
      &lt/div&gt
      &ltdiv class="o-field o-grid__cell carinfo-grid__cell"&gt
        &ltinput
          class="c-field"
          type="text"
          placeholder="请输入VIN码"
          maxlength="17"
          v-model="framNoModel"&gt
      &lt/div&gt
    &lt/div&gt
  &lt/section&gt
    &ltsection class="l-container c-card__item carinfo-card__item carinfo-card__item--width-94"&gt
      &ltdiv class="o-grid carinfo-grid c-input-group"&gt
        &ltdiv class="o-grid__cell carinfo-grid__cell carinfo-grid__cell--width-40"&gt
          &ltlabel&gt发动机号码&lt/label&gt
        &lt/div&gt
        &ltdiv class="o-field o-grid__cell carinfo-grid__cell"&gt
          &ltinput type="text"
            class="c-field"
            placeholder="请输入发动机号码"
            maxlength="30"
            v-model="engineNoModel"&gt
        &lt/div&gt
      &lt/div&gt
    &lt/section&gt
    &ltsection class="l-container c-card__item carinfo-card__item carinfo-card__item--width-94"&gt
      &ltdiv class="o-grid carinfo-grid c-input-group"&gt
        &ltdiv class="o-grid__cell carinfo-grid__cell carinfo-grid__cell--width-40"&gt
          &ltlabel&gt核定载客量&lt/label&gt
        &lt/div&gt
        &ltdiv class="o-field o-grid__cell carinfo-grid__cell"&gt
          &ltinput type="text"
            class="c-field"
            maxlength="2"
            placeholder="请输入核定载客量"
            v-model="seatCountModel"
          &gt
        &lt/div&gt
      &lt/div&gt
    &lt/section&gt
&lt/section&gt
&ltbutton type="button" class="c-button c-button--block u-medium c-button--error "&gt提交&lt/button&gt


        </code>
      </pre>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      framNoModel: "",
      engineNoModel: "",
      seatCountModel: ""
    };
  }
};
</script>
<style lang="less" scoped>
h4 {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  background-color: #e9e9e9;
  padding: 10px;
  margin: 20px 0;
}
p {
  text-align: left;
  padding: 0.5em 0;
}
.c-code--multiline {
  display: block;
  padding: 0.5em 1em;
  border-radius: 4px;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}
.demo-markup-source {
  text-align: left;
}
.c-code {
  font-size: 0.8em;
}
</style>
